<juci-layout-with-sidebar>
	<div ng-controller="SettingsPasswordCtrl">
		<juci-config-section>
			<juci-config-heading>{{ 'Gateway Password' | translate }}</juci-config-heading>
			<juci-config-info>{{ 'settings.password.info' | translate }}</juci-config-info>
		</juci-config-section>
		<juci-config-section>
			<juci-config-lines>
				<juci-config-line title="{{'Change password for user'|translate}}">
					<juci-select ng-model="username" ng-items="allUsers"></juci-select><br/>
					<button class="btn btn-default pull-right" ng-click="onChangePasswordClick()">{{'Change Password'|translate}}</button>
				</juci-config-line>
			</juci-config-lines>
		</juci-config-section>
		<modal title="{{'Change Password'|translate}}" ng-show="showModal" on-accept="onAcceptModal()" on-dismiss="onDismissModal()" dismiss-label="Cancel" accept-label="Change Password">
			<form class="form-horizontal">
				<div class="alert alert-danger" ng-show="error">{{error}}</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">Current Password</label>
					<div class="col-sm-8">
						<input ng-model="modal.old_password" type="password" class="form-control" id="inputEmail3" placeholder="Current Password">
					</div>
				</div> 
				<div class="form-group">
					<label class="col-sm-4 control-label">New Password</label>
					<div class="col-sm-8">
						<input ng-model="modal.password"  type="password" class="form-control" id="inputPassword3" placeholder="New Password">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">Reenter Password</label>
					<div class="col-sm-8">
						<input ng-model="modal.password2" type="password" class="form-control" id="inputPassword3" placeholder="Reenter Password">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-4 control-label">Password Strength</label>
					<div class="col-sm-4">
						<div ng-show="passwordStrength == 0"><label>Weak</label><br/><div class="col-sm-1" style="height: 4px; background-color: #e00;" /></div>
						<div ng-show="passwordStrength == 1"><label>Not enough</label><br/><div class="col-sm-5"  style="height: 4px; background-color: #FF7E00;" /></div>
						<div ng-show="passwordStrength == 2"><label>Medium</label><br/><div class="col-sm-8"  style="height: 4px; background-color: #FF9000;" /></div>
						<div ng-show="passwordStrength == 3"><label>Strong</label><br/><div class="col-sm-12"  style="height: 4px; background-color: #2D951E;" /></div>
					</div>
				</div>
			</form>
		</modal>
	</div>
</juci-layout-with-sidebar>
